<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
	<title>自定义促销</title>
	<style type="text/css">
		#attr2,#attr3{display: none;}
	</style>

	<script type="text/javascript">
		var pageListUrl = "<c:url value="/promotion/customer/list" />";
		var loadByIdUrl = "<c:url value="/promotion/customer/load/" />";
		var saveUrl = "<c:url value="/promotion/customer/save" />";
		var delByIdUrl = "<c:url value="/promotion/customer/del/" />";

		var detailTbodyTemplateID = "detailTbodyTemplate";
		var detailTbodyID = "detailTbody";
		var pageToolID = "pageTool";

		var editTemplateID = "edit-template";
		var editFormID = "nsForm";
		var searchFormID = "searchForm";


		$(function () {
			toPage(1);
		});

		template.helper('timeUnitConversion', function (timeUnit) {
			var unit = timeUnitData[timeUnit];
			return unit ? unit : timeUnit;
		});


	</script>

</head>


<body  class="list-body">



<div class="content">
	<div class="title fix">
		<h3 class="b f14 fl">自定义促销</h3>
		<div class="btns fr">
			<%--<button class="green" onclick="add()">新增</button>--%>
			<%--<button class="orange">返回</button>--%>
		</div>
	</div>

	<div class="main">
		<div class="inquiry">
			<form id="searchForm">
				<input type="hidden" name="currentPage" value="1">
				<input type="hidden" name="toolStyle" value="pms">
				<input type="hidden" name="limit" value="10">
				<input type="hidden" name="method" value="toPage">
				<input type="hidden" name="dealerId" value="${dealerNum}">

				<%--<div class="group"><label>活动名称：</label><input type="text" name="name" value=" " /></div>--%>
				<%--<div class="group"><label>活动时间：</label><input type="text" name="name" value=" " /> - <input type="text" name="name" value=" " /></div>--%>
				<%--<div class="group"><label>活动状态：</label><input type="text" name="name" value=" " /></div>--%>
				<%--<div class="btns"><button type="button" class="bottleGreen vm" onclick="toPage(1)">查看</button></div>--%>
			</form>
			<div class="btns " style="width: 100%;">
				<button class="green" onclick="add()">新增</button>
				<%--<button class="orange">返回</button>--%>
			</div>
		</div>
		<div class="table">
			<table width="100%">
				<thead>
				<tr>
					<%--<th width="5%"><input type="checkbox" name="name" value=" " /></th>--%>
					<th width="50">序号</th>
					<th width="150">模板类型</th>
					<th width="">促销内容</th>
					<th width="50">有效期</th>
					<th width="">修改时间</th>
					<th width="100">操作</th>
				</tr>
				</thead>
				<tbody id="detailTbody" class="detailTr"></tbody>
			</table>
		</div>

		<div class="pageTool" id="pageTool"></div>
	</div>
</div>
<script id="detailTbodyTemplate" type="text/html">
	{{each items as v i}}
	<tr id="{{v.id}}" >
		<td>{{start + i + 1}}</td>
		<td>
			{{if v.attr1 == '0'}}
				买赠：买XXX赠送XXX
			{{else if  v.attr1 == '1'}}
				买减：买XXX减XXX
			{{else if  v.attr1 == '2'}}
				直接送抵扣券：送XXX
			{{else if  v.attr1 == '3'}}
				直接送产品：送XXX
			{{else if  v.attr1 == '4'}}
				自定义
			{{/if}}
		</td>
		<td>{{v.promotionalContent}}</td>
		<td>{{v.periodOfValidity}}{{timeUnitConversion v.timeUnit}}</td>
		<td>{{v.lastUpdateDate}}</td>
		<td class="operate_td">
			<a href='javascript:void(0);' onclick="edit('{{v.id}}')">编辑</a>
			<a href='javascript:void(0);' onclick="del('{{v.id}}')">删除</a>
		</td>
	</tr>
	{{/each}}
	{{if items.length == 0}}
	<tr>
		<td colspan="7" class="none-data-tip">没有相关数据</td>
	</tr>
	{{/if}}
</script>


<script id="edit-template" type="text/html">
	<form id="nsForm" method="post" class="form-box">
		<input type="hidden" name="id" value="{{id}}"/>
		<input type="hidden" name="dealerId" value="${dealerNum}"/>

		<div class="box-body">
			<%--<div class="form-group">
				<label>保养类型</label>
				<select name="maintenanceType">
					<option value="">--请选择--</option>
					<option value="轮胎" {{maintenanceType == '轮胎'?'selected':''}}>轮胎</option>
					<option value="机油" {{maintenanceType == '机油'?'selected':''}}>机油</option>
					<option value="制动" {{maintenanceType  == '制动'?'selected':''}}>制动</option>

				</select>
			</div>--%>
			<div class="form-group">
				<label>促销类型</label>
				<select name="attr1" id="attr1" onchange="changeType()">
					<option value="">--请选择--</option>
					<option value="0" {{attr1 == '0'?'selected':''}}>买赠</option>
					<option value="1" {{attr1 == '1'?'selected':''}}>买减</option>
					<option value="2" {{attr1 == '2'?'selected':''}}>直接送抵扣券</option>
					<option value="3" {{attr1 == '3'?'selected':''}}>直接送产品</option>
					<option value="4" {{attr1 == '4'?'selected':''}}>自定义模板</option>

				</select>
			</div>
			<div class="form-group">
				<label></label>
				<span id="label1"></span><input id="attr2" style="width: 200px; height: 26px;" type="text" name="attr2" value="{{attr2}}" placeholder="请输入" autocomplete="off">
				<span id="label2"></span><input id="attr3" style="width: 200px; height: 26px;" type="text" name="attr3" value="{{attr3}}" placeholder="请输入" autocomplete="off">
			</div>
			<div class="form-group">
				<label>有效期</label>
				<input style="width: 50px; height: 26px;" type="text" name="periodOfValidity" value="{{periodOfValidity}}" placeholder="请输入" autocomplete="off">
				<select name="timeUnit"  style="width: 150px;">
					<option value="">--请选择--</option>
					<option value="day" {{timeUnit == 'day'?'selected':''}}>天</option>
					<option value="month" {{timeUnit == 'month'?'selected':''}}>月</option>
					<option value="year" {{timeUnit  == 'year'?'selected':''}}>年</option>
				</select>
			</div>
			<%--<div class="form-group" >
				<label>促销内容：</label>
				<textarea rows="3" name="promotionalContent" placeholder="请输入促销内容 ...">{{promotionalContent}}</textarea>
			</div>
--%>
		</div>

	</form>


</script>

<script>
	function changeType() {
		var v = $("#attr1").val();
		if(v == '0'){
			$("#label1").html('买');
			$("#label2").html('赠送');
			$("#attr2").show();
			$("#attr3").show();
		}else if(v == '1'){
			$("#label1").html('买');
			$("#label2").html('减');
			$("#attr2").show();
			$("#attr3").show();
		}else if(v == '2'){
			$("#label1").html('送');
			$("#label2").html('');
			$("#attr2").show();
			$("#attr3").hide();
		}else if(v == '3'){
			$("#label1").html('送');
			$("#label2").html('');
			$("#attr2").show();
			$("#attr3").hide();
		}else if(v == '4'){
			$("#label1").html('');
			$("#label2").html('');
			$("#attr2").show();
			$("#attr3").hide();
		}
	}
</script>

<script>

	function edit(id, successRunFunction, isRefresh) {
		//Ajax获取
		var loadIndex = ns.load();
		$.ajax({
			type: "POST",
			url: loadByIdUrl + id,
			dataType: "json",
			success: function (data) {
				ns.close(loadIndex);
				if (data.success) {
					ns.close(loadIndex);

					openEditWin("编辑", data.data, successRunFunction, isRefresh);
				} else {
					ns.error('数据加载失败' + data.message);
				}
			},
			error: function () {
				ns.close(loadIndex);
				ns.error('提交失败！');
			}
		});
	}


	function openEditWin(title, data, successRunFunction, isRefresh) {

		var contentHtml = template(editTemplateID, data);

		if(isRefresh === undefined){
			isRefresh = true;
		}

		layer.open({
			type: 1,
			title: title,
			area: '600px',
			btn: ['保 存', '取 消'],
			content: contentHtml,
			yes: function (index, layero) {
				var layerIndex = ns.load();
				$.ajax({
					type: "POST",
					url: saveUrl,
					dataType: "json",
					data: $("#" + editFormID).serialize(),
					success: function (data) {
						ns.close(layerIndex);
						if (data.success) {
							ns.ok('操作成功!', function () {
								ns.closeAll();
								if(isRefresh) {
									toPage(1);
								}
							});
							if(successRunFunction){
								successRunFunction();
							}
						} else {
							ns.error('提交失败，' + data.message);
						}
					},
					error: function () {
						ns.close(layerIndex);
						ns.error('提交失败！');
					}
				});
			}, cancel: function (index) {
				ns.closeAll();
			},success:function(){
				changeType();
			}
		});

		$("input[type=checkbox]").change(function(){
			$(this).prev().val($(this).prop("checked"));
		});
	}
</script>
</body>
</html>




